<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content ep-bg-purple-dark" />
            <el-card>
                <el-button type="success" style="margin-bottom:10px;" @click="showAddDialog">添加</el-button>
                <el-table :data="projectList" border style="width: 100%">
                    <el-table-column prop="tid" label="ID" width="50px" />
                    <el-table-column prop="tname" label="维修事件名" />
                    <el-table-column prop="location" label="维修地址" />

                    <el-table-column prop="rstart" label="维修开始时间" />
                    <el-table-column prop="rend" label="维修结束时间" />
                    <el-table-column prop="rstate" label="维修进度" width="100px">
                        <template #default="scope">
                            <el-tag v-if="scope.row.rstate === 1" type="success">已修缮</el-tag>
                            <el-tag v-else type="info">未处理</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-popover placement="right" :width="400" trigger="hover">
                                <template #reference>
                                    <el-button size="small" type="success"
                                               @click="showSetEmployeeDialog(scope.row.tid)">分配员工</el-button>
                                </template>
                                <el-table :data="scope.row.emps || []">
                                    <el-table-column width="100" property="rname" label="员工姓名" />
                                    <el-table-column width="300" property="rphone" label="员工电话" />
                                    <el-table-column width="300" property="department.dname" label="员工部门" />
                                </el-table>
                            </el-popover>
                            <el-button size="small" type="primary" @click="selectByTid(scope.row.tid)">修改</el-button>
                            <el-popconfirm title="你确定已经完成修缮嘛" confirm-button-text="确认" cancel-button-text="取消"
                                           @confirm="deleteBytid(scope.row.tid)">
                                <template #reference>
                                    <el-button size="small" type="success" plain>修缮</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!--添加事件的对话框开始-->
    <el-dialog v-model="addDialogshow" title=" 添加事件" width="700px">
        <el-form :model="RepairTaskAdd">
            <el-form-item label="维修事件名" label-width="20%">
                <el-input v-model="RepairTaskAdd.tname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="维修地址" label-width="20%">
                <el-input v-model="RepairTaskAdd.location" autocomplete="off" />
            </el-form-item>
            <el-form-item label="维修开始时间" label-width="20%">
                <el-date-picker v-model="RepairTaskAdd.rstart" type="date" placeholder="请选择维修开始日期"
                                format="YYYY-MM-DD" style="width: 300px" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="维修预计结束时间" label-width="20%">
                <el-date-picker v-model="RepairTaskAdd.rend" type="date" placeholder="请选择维修预计结束日期"
                                format="YYYY-MM-DD" style="width: 300px" value-format="YYYY-MM-DD" />
            </el-form-item>
<!--            <el-form-item label="项目进度" label-width="20%">-->
<!--                <el-select v-model="displayAddRstate" placeholder="请选择状态">-->
<!--                    <el-option label="未处理" value="0"></el-option>-->
<!--                    <el-option label="已修缮" value="1"></el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogshow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--添加事件的对话框结束-->
    <!--修改事件的对话框开始-->
    <el-dialog v-model="updateDialogShow" title=" 修改事件" width="700px">
        <el-form :model="RepairTaskUpdate">
            <el-form-item label="维修事件名" label-width="20%">
                <el-input v-model="RepairTaskUpdate.tname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="维修地址" label-width="20%">
                <el-input v-model="RepairTaskUpdate.location" autocomplete="off" />
            </el-form-item>
            <el-form-item label="维修开始时间" label-width="20%">
                <el-date-picker v-model="RepairTaskUpdate.rstart" type="date" placeholder="请选择维修开始日期"
                                format="YYYY-MM-DD" style="width: 300px" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="维修结束时间" label-width="20%">
                <el-date-picker v-model="RepairTaskUpdate.rend" type="date" placeholder="请选择维修结束日期"
                                format="YYYY-MM-DD" style="width: 300px" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="项目进度" label-width="20%">
                <el-select v-model="displayUpdateRstate" placeholder="请选择状态">
                    <el-option label="未处理" value="0"></el-option>
                    <el-option label="已修缮" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改事件的对话框结束-->
    <!--分配员工的对话框开始-->
    <el-dialog v-model="setEmployeeDialogShow" title=" 分配员工">
        <el-transfer v-model="selectedRids" :data="allEmployee" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="setEmployeeDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insertTidAndRid">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!--分配员工的对话框结束-->
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
import RepairTaskApi from '@/api/RepairTaskApi';

// 查询所有项目的数组
const projectList = ref([]);
// 展示在职员工的对话框
const setEmployeeDialogShow = ref(false);
// 所有员工的信息 key label
const allEmployee = ref([]);
// 被选中的员工的rid
const selectedRids = ref([]);
// 需要分配员工的项目id
const selectedTid = ref(0);
// 添加对话框是否显示状态
const addDialogshow = ref(false);
// 修改对话框是否显示状态
const updateDialogShow = ref(false);
// 加载状态
const isLoading = ref(false);

// 被添加事件的信息
const RepairTaskAdd = ref({
    tname: '',
    location: '',
    rstart: '',
    rend: '',
    rstate: 0 // 初始化为数字0（未处理）
});

// // 计算属性，用于在添加对话框中显示对应的文字
// const displayAddRstate = computed({
//     get() {
//         return RepairTaskAdd.value.rstate === 0 ? '未处理' : '已修缮';
//     },
//     set(value) {
//         RepairTaskAdd.value.rstate = value === '未处理' ? 0 : 1;
//     }
// });

// 被修改事件的信息
const RepairTaskUpdate = ref({
    tid: 0,
    tname: '',
    location: '',
    rstart: '',
    rend: '',
    rstate: 0 // 初始化为数字0（未处理）
});

// 计算属性，用于在修改对话框中显示对应的文字
const displayUpdateRstate = computed({
    get() {
        return RepairTaskUpdate.value.rstate === 0 ? '未处理' : '已修缮';
    },
    set(value) {
        RepairTaskUpdate.value.rstate = value === '未处理' ? 0 : 1;
    }
});

// 显示添加对话框
function showAddDialog() {
    // 重置表单数据
    RepairTaskAdd.value = {
        tname: '',
        location: '',
        rstart: '',
        rend: '',
        rstate: 0
    };
    addDialogshow.value = true;
}

// 定义方法完成事件添加
function insert() {
    isLoading.value = true;
    RepairTaskApi.insert(RepairTaskAdd.value)
        .then(resp => {
            isLoading.value = false;
            if (resp.code === 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                addDialogshow.value = false;
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '添加失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 定义方法实现事件修改
function update() {
    isLoading.value = true;
    RepairTaskApi.update(RepairTaskUpdate.value)
        .then(resp => {
            isLoading.value = false;
            if (resp.code === 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                updateDialogShow.value = false;
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '修改失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 定义方法根据id查询事件的信息
function selectByTid(tid) {
    isLoading.value = true;
    RepairTaskApi.selectByTid(tid)
        .then(resp => {
            isLoading.value = false;
            // 确保数据存在
            if (resp.data) {
                RepairTaskUpdate.value = {
                    ...resp.data,
                    // 确保rstate是数字类型
                    rstate: Number(resp.data.rstate)
                };
                updateDialogShow.value = true;
            } else {
                ElMessage({
                    message: '未找到该事件信息',
                    type: 'warning',
                    duration: 2000
                });
            }
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '查询失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 删除事件（标记为已修缮）
function deleteBytid(tid) {
    isLoading.value = true;
    RepairTaskApi.delete(tid)
        .then(resp => {
            isLoading.value = false;
            if (resp.code === 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                selectAll();
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '操作失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 查询所有在职员工信息并显示分配员工对话框
function showSetEmployeeDialog(tid) {
    isLoading.value = true;
    RepairTaskApi.allEmployee(tid)
        .then(resp => {
            isLoading.value = false;
            allEmployee.value = resp.data.allEmployee || [];
            selectedRids.value = resp.data.selectedRids || [];
            selectedTid.value = tid;
            setEmployeeDialogShow.value = true;
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '获取员工信息失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 查询所有项目信息
function selectAll() {
    isLoading.value = true;
    RepairTaskApi.selectAll()
        .then(resp => {
            isLoading.value = false;
            projectList.value = resp.data || [];
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '获取项目列表失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 分配员工
function insertTidAndRid() {
    isLoading.value = true;
    RepairTaskApi.insertTidAndRid(selectedTid.value, selectedRids.value)
        .then(resp => {
            isLoading.value = false;
            ElMessage.success(resp.msg);
            setEmployeeDialogShow.value = false;
            selectAll();
        })
        .catch(error => {
            isLoading.value = false;
            ElMessage({
                message: '分配员工失败: ' + error.message,
                type: 'error',
                duration: 2000
            });
        });
}

// 页面加载时查询所有项目
onMounted(() => {
    selectAll();
});
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>